<script setup>
	import FirstTitle from "@comp/FirstTitle";
	import {
		Editor,
		Toolbar
	} from "@wangeditor/editor-for-vue";
	import {
		onMounted
	} from "vue";

	import {
		searchDataZhbz
	} from "@/api/search";
	import {
		addOrUpdateZhbz
	} from "@/api/addOrUpdate";


	const city = window.globalObj.name;
	import {
		postTableData
	} from "@/api/table";

	const editorRef = shallowRef();
	const editorRef1 = shallowRef();
	const editorRef2 = shallowRef();
	const toolbarConfig = {};
	const toolbarConfig1 = {};
	const toolbarConfig2 = {};
	const editorConfig = {
		placeholder: "请输入内容..."
	};
	const mode = ref("default");
	const mode1 = ref("default");
	const mode2 = ref("default");

	// 加载html
	const initHtml = () => {
		return searchDataZhbz({
			m: "能力现状-疏散掩蔽场所保障现状"
		}).then((res) => {
			const {
				data
			} = res
			valueHtml.value = data.find((x) => x.k === "掩蔽场所现状")?.v || "";
			valueHtml1.value = data.find((x) => x.k === "疏散地域现状")?.v || "";
			valueHtml2.value = data.find((x) => x.k === "疏散基地现状")?.v || "";
		})
	};


	const handleCreated = (editor) => {
		editorRef.value = editor; // 记录 editor 实例，重要！
	};
	const handleCreated1 = (editor) => {
		editorRef1.value = editor; // 记录 editor 实例，重要！
	};
	const handleCreated2 = (editor) => {
		editorRef2.value = editor; // 记录 editor 实例，重要！
	};


	const valueHtml = ref(
		"全市有主要大型公园广场 14处，占地面积约14432万平方米;共有应急避难场所 185 处，占地面积523万平方米，可容纳人数约 68万人;共有学校315 所，建筑面积346万平方米，可容纳人数约25万人。战时可满足掩蔽任务。具体情况如下："
	);
	const valueHtml1 = ref(
		"全市共有XX个疏散地域，当地人口总数XX万人，可接收人口XX万人。具体情况如下："
	)
	const valueHtml2 = ref(
		"全市共有疏散基地XX个，占地面积约为XX万㎡，可接收安置XX人。具体情况如下："
	)


	const saveProgramme = () => {
		ElMessageBox.confirm(`确定要保存吗?`, "警告", {
			confirmButtonText: "确定",
			cancelButtonText: "取消",
			type: "warning",
			customClass: "message-box",
		}).then(() => {
			addOrUpdateZhbz({
					m: "能力现状-疏散掩蔽场所保障现状",
					data: [{
							k: "掩蔽场所现状",
							v: valueHtml.value,
						},
						{
							k: "疏散地域现状",
							v: valueHtml1.value,
						},
						{
							k: "疏散基地现状",
							v: valueHtml2.value,
						}
					],
				})
				.then((result) => {
					if (result.code === 200) {
						ElMessage.success("操作成功");
						initHtml();
					} else {
						ElMessage.error(result.msg);
					}
				})
				.catch(() => {});
		});
	}


	onBeforeUnmount(() => {

		const editor = editorRef.value;
		const editor1 = editorRef1.value;
		const editor2 = editorRef2.value;
		if (!editor) return;
		if (!editor1) return;
		if (!editor2) return;
		editor.destroy();
		editor1.destroy();
		editor2.destroy();
	});

	// 表头单元格样式
	const headerCellStyle = () => {
		return {
			backgroundColor: "#f5f7fa",
			color: "rgba(0,0,0,0.85)",
			fontSize: "14px",
			height: "54px",
		};
	};
	// 单元格样式
	const cellStyle = () => {
		return {
			color: "rgba(0,0,0,0.65)",
			fontSize: "14px",
			lineHeight: "22px",
		};
	};

	const tableData1 = ref([])
	const tableData2 = ref([])
	const tableData3 = ref([])
	const getList1 = () => {
		return postTableData({
			docType: "comprehensiveSupport",
			method: "renfangfenbuqingkuang",
		}).then(result => {
			if (result.code === 200) {
				tableData1.value = result?.data || []
			}
		})
	}
	const getList2 = () => {
		return postTableData({
			docType: "comprehensiveSupport",
			method: "shusandiyuqinguangtongji",
		}).then(result => {
			if (result.code === 200) {
				tableData2.value = result?.data || []
			}
		})
	}
	const getList3 = () => {
		return postTableData({
			docType: "comprehensiveSupport",
			method: "shusanjidiqingkuang",
		}).then(result => {
			if (result.code === 200) {
				tableData3.value = result?.data || []
			}
		})
	}


	onMounted(async () => {
		await initHtml()
		await getList1()
		await getList2()
		await getList3()
	});
</script>
<template>
	<div class="">
		<FirstTitle name="掩蔽场所现状" />
		<!-- <div class="top-15">
			人防工程能力现状：共有XX个，使用面积XX㎡，可容纳XX人。具体情况如下：
		</div> -->
		<div style="border: 1px solid #ccc" class="top-15">
			<Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig"
				:mode="mode" />
			<Editor style="height: 500px; overflow-y: hidden" v-model="valueHtml" :defaultConfig="editorConfig"
				:mode="mode" @onCreated="handleCreated" />
		</div>


		<!-- <div class="top-15 text-center">
			{{city}}掩蔽场所现状分布情况统计表（单位:个）
		</div>
		<el-table id="table" :data="tableData1" class="top-15" style="width: 100%" :header-cell-style="headerCellStyle"
			:cell-style="cellStyle" border>
			<el-table-column prop="[rowNum" label="序号" width="100" align="center" />
			<el-table-column prop="jd_name" label="行政区域" />
			<el-table-column prop="total" label="总数" />
			<el-table-column prop="zhihui" label="指挥通信工程" />
			<el-table-column prop="yiliao" label="医疗救护工程" />
			<el-table-column prop="zhuanye" label="专业队工程" />
			<el-table-column prop="renyuanyanbi" label="人员掩蔽工程" />
			<el-table-column prop="wuzicunchu" label="物资储备工程" />
			<el-table-column prop="other" label="其它人防工程" />
			<el-table-column prop="usable_area" label="使用面积(㎡)" />
			<el-table-column prop="renjun" label="人均防护面积(㎡/人)" />
			<el-table-column prop="wartime_shelter" label="可容纳人数(人)" />
		</el-table> -->

		<FirstTitle name="疏散地域现状" class="top-15" />
		<!-- <div class="top-15">
			
		</div> -->
		<div style="border: 1px solid #ccc" class="top-15">
			<Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef1" :defaultConfig="toolbarConfig1"
				:mode="mode1" />
			<Editor style="height: 500px; overflow-y: hidden" v-model="valueHtml1" :defaultConfig="editorConfig"
				:mode="mode1" @onCreated="handleCreated1" />
		</div>


		<!-- <div class="top-15 text-center">
			{{city}}疏散地域情况统计表（单位:个）
		</div>
		<el-table id="table" :data="tableData2" class="top-15" style="width: 100%" :header-cell-style="headerCellStyle"
			:cell-style="cellStyle" border>
			<el-table-column prop="rowNum" label="序号" width="100" align="center" />
			<el-table-column prop="jd_name" label="行政区域" />
			<el-table-column prop="num" label="总数" />
			<el-table-column prop="local_population" label="当地人口总数(万人)" />
			<el-table-column prop="accept_population" label="可容纳人口(万人)" />
		</el-table> -->


		<FirstTitle name="疏散基地现状" class="top-15" />
		<!-- <div class="top-15">
		</div> -->
		<div style="border: 1px solid #ccc" class="top-15">
			<Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef2" :defaultConfig="toolbarConfig2"
				:mode="mode2" />
			<Editor style="height: 500px; overflow-y: hidden" v-model="valueHtml2" :defaultConfig="editorConfig"
				:mode="mode2" @onCreated="handleCreated2" />
		</div>


		<div class="top-15 text-center">
			{{city}}疏散基地情况统计表
		</div>
		<el-table id="table" :data="tableData3" class="top-15" style="width: 100%" :header-cell-style="headerCellStyle"
			:cell-style="cellStyle" border>
			<el-table-column prop="rowNum" label="序号" width="100" align="center" />
			<el-table-column prop="jd_name" label="行政区划" />
			<el-table-column prop="name" label="基地名称" />
			<el-table-column prop="an" label="地址" />
			<el-table-column prop="jzhu_area" label="使用面积（㎡）" />
			<el-table-column prop="area" label="建筑面积（㎡）" />
			<el-table-column prop="anzhi_count" label="可安置人员（人）" />
		</el-table>





		<div class="flex-justify-end top-20">
			<el-button type="primary" class="save-btn" @click="saveProgramme">保存</el-button>
		</div>
	</div>
</template>
<style scoped lang="scss"></style>